<template>
  <div class="content">
    <div class="login-header">
      <div class="index-header no-bg">
        <router-link to="/" class="back">
          <van-icon name="arrow-left"/>
        </router-link>
      </div>

      <div class="h-logo"></div>
    </div>

    <div class="register-top-box">
      <div class="reg-title">用户登录</div>
    </div>

    <div class="login-box reg">
      <van-cell-group>
        <van-field class="login-input" v-model="username" clearable placeholder="请输入手机号码" left-icon="phone" />


        <van-field v-if="!codeLogin" class="login-input" v-model="password" type="password" placeholder="请输入密码" left-icon="lock">
          <!--<router-link :to="{name:'forgetPwd'}" slot="button" size="small" type="primary">忘记密码</router-link>-->
        </van-field>

        <van-field v-if="codeLogin" class="login-input" v-model="code" type="number" placeholder="请输入验证码">
          <van-button slot="button" size="small" :disabled="codeStatus" class="login-code-btn" type="primary" @click="getCode(1)">
            <span v-if="!codeStatus" style="display: block;line-height: .75rem">获取验证码</span>
            <van-count-down ref="countDown" millisecond :time="60000" :auto-start="false" format="ss" @finish="getCode(0)"/>
          </van-button>
        </van-field>

      </van-cell-group>

      <van-button type="info" class="login-btn" @click="userLogin">登    录</van-button>

      <div class="login-bottom-tps">
        <a @click="codeLogin=true;code=''" v-if="!codeLogin" class="pull-left">短信验证码登陆</a>
        <a @click="codeLogin=false;code=''" v-if="codeLogin" class="pull-left">密码登陆</a>
        <!--<router-link :to="{name:'Register'}" class="pull-right">注册</router-link>-->
      </div>

      <div class="serviceaAgreement">
        <a target="_blank" href="#/msg_detail?id=1">
          服务协议
        </a>
        <span>丨</span>
        <a target="_blank" href="#/msg_detail?id=2">
          隐私政策
        </a>
      </div>

    </div>
  </div>
</template>

<script>
  import storeJs from 'storejs'
  export default {
    name: "login",
    components: {
    },
    data() {
      return {
        username:"",
        password:"",
        code:"",
        codeStatus:false,
        codeLogin:true,
      }
    },
    computed: {},
    beforeCreate:function(){
      if(storeJs('carToken')){
        this.$router.replace({
          path: '/',
          query: {
            redirect: this.$router.currentRoute.fullPath
          }
        });
      }
    },
    mounted: function () {
    },
    methods: {
      //登陆
      userLogin(){
        var that=this;
        if(!that.is_mobile(that.username)){
          this.$toast('请输入正确的手机号码！');
          return false;
        }

        if((that.password=="" || that.password.length<6) && !that.codeLogin){
          this.$toast('请输入不小于6个字符的密码！');
          return false;
        }

        if(that.code=="" && that.codeLogin){
          this.$toast('请输入验证码！');
          return false;
        }

        that.$api.login.login({
          mobile: that.username,
          password: that.password,
          code: that.code,
        }).then(res=> {
          res=res.data;

          if(res.status){
            storeJs('carToken',res.data.token);
            storeJs.set('User',res.data.user);
            that.$router.replace({
              path: '/',
              query: {
                redirect: that.$router.currentRoute.fullPath
              }
            });

          }else{
            this.$toast(res.msg);
          }
        });


      },

      //获取验证码
      getCode(status){
        if(!this.is_mobile(this.username)){
          this.$toast('请输入正确的手机号码！');
          return false;
        }

        if(status){
          this.$api.login.getCode({
            mobile:this.username,
            code_status:1,
          }).then(res=>{
            res=res.data;

            if(res.status){
              this.codeStatus=true;
              this.$refs.countDown.start();
            }else{
              this.$toast(res.msg);
            }
          });
        }else{
          this.codeStatus=false;
          this.$refs.countDown.reset();
        }

      },


    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/login.scss";
</style>
